<template>
  <div class="visualBox">
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/notice' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据管理</el-breadcrumb-item>
      <el-breadcrumb-item>成绩统计</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 数据可视化区域 -->
    <div class="visual">
      <!-- 学院学生合格率 -->
      <div ref="percent" class="scorePercent"></div>
      <!-- 学院人数 -->
      <div ref="num" class="studentNum"></div>
    </div>
  </div>
</template>

<script>
// 导入echarts接口
import echarts from 'echarts'
// 导入lodash插件
import _ from 'lodash'
export default {
  data() {
    return {
      // 指定学院学生合格率图表的配置项和数据
      percentOptions: {
        title: {
          text: '各学院合格率',
          top: 20,
          left: 20,
          textStyle: {
            color: '#666',
            fontSize: 14
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'cross'
          },
          backgroundColor: 'rgba(245, 245, 245, 0.8)',
          borderWidth: 1,
          textStyle: {
            color: '#000'
          },
          formatter: function(value) {
            return value[0].name + ' : ' + value[0].value * 100 + ' %'
          }
        },
        toolbox: {
          top: 20,
          right: 20,
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false },
            magicType: { type: ['line', 'bar'] },
            restore: {},
            saveAsImage: {}
          }
        },
        xAxis: {
          data: [
            '计算机学院',
            '设计工程学院',
            '机械与电气工程学院',
            '管理学院',
            '电子信息学院',
            '外国语学院',
            '商学院',
            '传媒艺术学院'
          ],
          axisLabel: { rotate: 50, interval: 0 },
          splitLine: {
            show: true
          },
          scale: true
        },
        yAxis: {},
        grid: [{ left: '10%', bottom: '23%' }],
        legend: {},
        series: [
          {
            type: 'line',
            smooth: true,
            markPoint: {
              data: [
                { type: 'max', name: '最大值' },
                { type: 'min', name: '最小值' }
              ]
            },
            markLine: {
              data: [{ type: 'average', name: '平均值' }]
            }
          }
        ]
      },
      // 指定学院人数图表的配置项和数据
      numOptions: {
        title: {
          text: '各学院人数',
          top: 20,
          left: 20,
          textStyle: {
            color: '#666',
            fontSize: 14
          }
        },
        tooltip: {},
        toolbox: {
          top: 20,
          right: 20,
          feature: {
            dataView: {},
            saveAsImage: {
              pixelRatio: 7
            },
            restore: {}
          }
        },
        legend: {
          type: 'scroll',
          // orient: 'vertical',
          left: 50,
          right: 50,
          // top: 40,
          bottom: 10,
          data: [
            '计算机学院',
            '设计工程学院',
            '机械与电气工程学院',
            '管理学院',
            '电子信息学院',
            '外国语学院',
            '商学院',
            '传媒艺术学院'
          ]
        },
        series: [
          {
            type: 'pie',
            radius: '50%'
          }
        ]
      }
    }
  },
  methods: {
    // 获取学院学生人数
    async getStudentNum() {
      // 基于准备好的dom，初始化echarts实例
      var studentNum = echarts.init(this.$refs.num, 'light')
      // 发起请求
      const res = await this.$http.get('users/number')
      // 获取报表数据失败
      if (res.meta.status !== 200) {
        return this.$message.error('初始化数据报表失败！')
      }
      // 获取报表数据成功
      let result = _.cloneDeep(this.numOptions)
      // 添加数据源
      result.series[0].data = res.data
      // 使用刚指定的配置项和数据显示图表。
      studentNum.setOption(result)
    },
    // 获取学院学生成绩合格率
    async getStudentPercent() {
      // 基于准备好的dom，初始化echarts实例
      var percent = echarts.init(this.$refs.percent, 'light')
      // 发起请求
      const res = await this.$http.get('scores/percent')
      // 获取报表数据失败
      if (res.meta.status !== 200) {
        return this.$message.error('初始化数据报表失败！')
      }
      // 获取报表数据成功
      let result = _.cloneDeep(this.percentOptions)
      // 添加数据源
      result.series[0].data = res.data
      // 使用刚指定的配置项和数据显示图表。
      percent.setOption(result)
    }
  },
  async mounted() {
    this.getStudentNum()
    this.getStudentPercent()
  }
}
</script>

<style lang="less" scoped>
.visualBox {
  height: 100%;
}
.visual {
  position: relative;
  top: 10px;
  height: 100%;
}
.scorePercent {
  height: 450px;
  position: absolute;
  left: 0;
  right: 420px;
  background-color: #fff;
}
.studentNum {
  width: 400px;
  height: 300px;
  position: absolute;
  right: 0;
  background-color: #fff;
}
</style>